<template>
	<view class="box">
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />领取详情
			
		</view>
		<view class="" style="height: 120rpx;" v-if="licensePlateList.length!=0">
			<view class="classify_top">
				<view class="left">
					车牌号
				</view>
				<view class="right">
					{{year1}}月已领会员礼
					<p class="remove" @click="wtfk">问题反馈</p>
				</view>
			</view>
		</view>
		<view class="classify">
			<scroll-view scroll-y="true" class="classify-left scroll-view">
				<view class="iteam" :style="{backgroundColor:cut==j?'#ffffff':''}" v-for="(i,j) in licensePlateList" :key="j" @click="cutClik(j)">
					{{i.licensePlateNumber}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="classify-right scroll-view">
				<view class="productList" v-if="productsList.length!=0">
					<view class="iteam" v-for="(item,index) in productsList" :key="index" @click="detail(item)">
						<view class="flex">
							<image class="iteam_image" :src="item.merchantInformation.storePicture" mode="aspectFill"></image>
							<view class="iteam_right">
								<view class="dianpu">{{item.merchantInformation?item.merchantInformation.merchantName : ' '}}</view>
								<view class="fenshu_s" v-if="item.recordTime">领取时间：{{item.recordTime.split(' ')[0]}}</view>
								<view class="fenshu">
									<view class="num">礼品：{{item.giftNum}}份</view>
									<view class="detail">查看详情></view>
									<!-- <view class="price" v-if="item.price">
										<view class="price1">￥{{item.price}}</view>
										<view class="price2">￥0</view>
									</view>
									<view class="price"  v-else></view> -->
									<!-- <view class="fenshu_l">已领取</view> -->
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="iteam" v-for="(item,index) in productsList" :key="index" @click="detail(item)">
						<view class="flex">
							<image class="iteam_image" :src="item.giftPicture" mode="aspectFill"></image>
							<view class="iteam_right">
								<view class="title">{{item.giftName}}</view>
								<view class="fenshu">
									<view class="price" v-if="item.price">
										<view class="price1">￥{{item.price}}</view>
										<view class="price2">￥0</view>
									</view>
									<view class="price"  v-else></view>
									<view class="fenshu_l">已领取</view>
								</view>
							</view>
						</view>
						<view class="flex_end tiem_btm">
							<view class="dianpu" @click.stop="tzbusiness(item)">{{item.merchantInformation?item.merchantInformation.merchantName : ' '}}</view>
							<view class="fenshu_s">{{item.recordTime}}</view>
						</view>
					</view> -->
				</view>
				<view v-if="productsList.length == 0" class="none">
					<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
					<view>没有更多数据了</view>
				</view>
			</scroll-view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
	//  #endif
	export default {
		data() {
			return {
				statusBarHeight,
				imgUrl: this.$imgSrc,
				userInfo: uni.getStorageSync("Pduser"),
				cut:0,
				years:"",
				year1: '',
				// 车牌
				licensePlateList:[],
				productsList:[]
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		async onLoad(options) {
			this.years=options.years||''
			if (options.years.split('-').length > 1) {
				this.year1 = options.years.split('-')[1]
			}
			
			// 2023-9
			await this.licensePlate()
			this.productList(this.cut)
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		methods: {
			// 获取车牌号列表
			async licensePlate(){
				 await this.$myRequest.get("/api/mobile/vehicleOwner/getLicensePlateNumberListByUserId",{
					userId:this.userInfo.id||'',
					deleteFlag:0
				}).then(res => {
					this.licensePlateList=res.LicensePlateNumberList.pageList
				});
			},
			// 根据车牌号获取商品
			productList(index){
				let data={}
				data={
					licensePlateNumber:this.licensePlateList[index].licensePlateNumber,
					years:this.years
				}
				this.$myRequest.get("/api/mobile/vehicleOwner/getReceiveRecordByLicensePlateNumber",data).then(res => {
					this.productsList=[...res.giftReceiveRecord.pageList.filter(item => item.giftNum != 0)]
				});
			},
			detail(item) {
				uni.navigateTo({ url: '/pages_owner/carMember/receiveRecord?batchCode=' + item.batchCode + '&licensePlateNumber=' + this.licensePlateList[this.cut].licensePlateNumber + '&years=' + this.years })
			},
			wtfk(){
				uni.navigateTo({
					url: "/pages_owner/carMember/chyproblem"
				})
			},
			tzbusiness(item){
				if (item.userInformation.businessType == 1 && item.userInformation.isShop == 1) {
					if(item.userInformation.shopType == 1){
						uni.navigateTo({ url: '/pages_intermediary/shopDetails?id=' + item.userInformation.shopId })
					} else if ( item.userInformation.shopType == 2) {
						uni.navigateTo({
							url: "/pages_houses/houses/housesDetails?id=" + item.userInformation.buildingsId
						})
					}
				} else if (item.userInformation.businessType == 2 && item.userInformation.isShop == 1) {
					if(item.userInformation.shopType == 1 || item.userInformation.shopType == 2){
						uni.navigateTo({
							url: "/pages_owner/dealer/dealerDetails?id=" + item.userInformation.shopId
						})
					}else if(item.userInformation.shopType ==3 || item.userInformation.shopType ==4 ){
						// 跳维修店
						uni.navigateTo({
							url: "/pages_owner/ownerService/ownerServiceDetails?id=" + item.userInformation.shopId
						})
					}
				} else if (item.userInformation.businessType == 0 && item.userInformation.enterpriseRecruitmentStatus == 1) {
					uni.navigateTo({ url: '/pages_recruitMoney/recruitmentDetails/companyDetails?userId=' + item.userInformation.id })
				} else {
					uni.navigateTo({ url: ' /pages_owner/dealer/goldConsultant?userId=' + item.userInformation.id })
				}
			},
			lpdetails(){
				uni.navigateTo({
					url: "/pages_owner/carMember/giftDetails"
				})
			},
			cutClik(index){
				this.cut=index
				this.productList(index)
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	page{
		background-color: #fff;
	}
	.box {
		width: 100%;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;
	
		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}
	
		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 104rpx;
			right: 30rpx;
		}
	
		p {
			position: absolute;
			// top: 90rpx;
			line-height: 45rpx;
			bottom: 21rpx;
			right: 30rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
	.tit {
		width: 750rpx;
		height: 100rpx;
		background-color: #f4f4f4;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 30rpx;
		font-weight: 400;
		color: #999999;
		.tit_item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.image{
				width: 60rpx;
				height: 30rpx;
			}
		}
		.xuan{
			font-size: 36rpx;
			font-weight: 400;
			color: #64B6A8;
		}
	}
	.scroll-view {
		// #ifdef MP-WEIXIN
		height: calc(100vh - var(--status-bar-height) - 5px - 88px - 120rpx);
		// #endif
		// #ifdef H5 || APP-PLUS
		height: calc(100vh - var(--status-bar-height) - 5px - 88rpx - 120rpx);
		// #endif
	}
	.classify_top {
		height: 115rpx;
		display: flex;
		align-items: center;
		box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.1);

		.left {
			width: 180rpx;
			text-align: center;
		}

		.right {
			width: 570rpx;
			// text-align: center;
			padding-left: 40rpx;
			position: relative;
			.remove{
				width: 123rpx;
				height: 48rpx;
				border-radius: 6rpx;
				border: 1px solid #64B6A8;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #64B6A8;
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	.classify{
		display: flex;
		.classify-left{
			width: 180rpx;
			background: #f4f4f4;
			.iteam{
				vertical-align:top;
				width: 100%;
				height: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;;
			}
		}
		.classify-right{
			box-sizing: border-box;
			width: 570rpx;
			background-color: #fff;
			padding: 40rpx 0;
			.productList{
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 30rpx;
				.iteam{
					// display: flex;
					margin-bottom: 40rpx;
					.iteam_image{
						width: 140rpx;
						height: 124rpx;
						border-radius: 6rpx;
					}
					.iteam_images{
						width: 218rpx;
						height: 156rpx;
						border-radius: 6rpx;
					}
					.iteam_right{
						flex: 1;
						margin-left: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.title{
							font-size: 28rpx;
							font-weight: 550;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1; //想要的行数
							-webkit-box-orient: vertical;
						}
						.fenshu{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.fenshu_l{
								width: 112rpx;
								height: 52rpx;
								background-color: #C7C7C7;
								border-radius: 26rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.price{
								font-size: 30rpx;
								color: red;
								display: flex;
								align-items: center;
								.price1 {
									margin-right: 12rpx;
									color: #666;
									font-size: 24rpx;
									text-decoration: line-through;
								}
							}
							.num{
								font-size: 26rpx;
								color: #333;
							}
							.detail {
								font-size: 26rpx;
								font-weight: 400;
								color: #64B6A8;
							}
						}
						.dianpu{
							font-size: 30rpx;
							font-weight: 400;
							color: #333;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1; //想要的行数
							-webkit-box-orient: vertical;
						}
					}
					.dianpu{
						color: #666;
						line-height: 42rpx;
						font-size: 28rpx;
					}
					.fenshu_s{
						line-height: 42rpx;
						font-size: 24rpx;
						font-weight: 500;
						color:#333;
					}
					.tiem_btm{
						margin-top: 10rpx;
					}
				}
			}
			.record{
				padding: 0 30rpx;
				.choice{
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					.choice_time{
						width: 300rpx;
						margin-right: 30rpx;
					}
					.choice_xz{
						flex:1;
					}
				}
				.iteam{
					margin-bottom: 30rpx;
					width: 510rpx;
					height: 270rpx;
					background-color: #FFFFFF;
					box-shadow: 0px 1px 6rpx 1px rgba(0,0,0,0.16);
					border-radius: 12rpx;
					padding: 24rpx 34rpx;
					.iteam_s{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-bottom: 16rpx;
						.iteam_span{
							color: #333333;
							width: 90rpx;
							text-align-last: justify;
						}
					}
				}
			}
		}
	}
	.Employee{
		padding: 0 30rpx;
		padding-top: 32rpx;
		.Employee_tab{
			width: 690rpx;
			height: 80rpx;
			border-radius: 12rpx;
			border: 1px solid #C7C7C7;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.name{
				flex: 1;
				font-size: 32rpx;
				font-weight: 550;
				color: #333333;
				text-align: center;
			}
			.phone{
				flex: 1;
				font-size: 32rpx;
				font-weight: 550;
				color: #333333;
				text-align: center;
			}
		}
		.iteam{
			width: 690rpx;
			height: 85rpx;
			border-bottom: 1px solid #C7C7C7;
			display: flex;
			align-items: center;
			.iteam_span{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
		}
		.newlyAdded{
			position: fixed;
			left: 50%;
			bottom: 100rpx;
			transform: translateX(-50%);
			width: 670rpx;
			height: 84rpx;
			background-color: #64B6A8;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
			.xz{
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	.none {
		text-align: center;
	
		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}
	
		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}
</style>
